<template>
  <div class="traceability-container">
    <!-- 页头 -->
    <div class="page-header">
      <div class="title">溯源管理</div>
    </div>
    
    <!-- 搜索面板 -->
    <el-card class="search-card">
      <el-form :model="query" label-width="100px" size="small">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="商品名称:">
              <el-input v-model="query.productName" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产批次:">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="许可证号:">
              <el-input v-model="query.productionLicenseNumber" placeholder="请输入许可证号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产企业:">
              <el-input v-model="query.productionCompany" placeholder="请输入生产企业" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 操作按钮 -->
    <div class="action-bar">
      <el-button type="primary" icon="Plus" @click="handleCreate">新增</el-button>
      <el-button type="danger" icon="Delete" :disabled="!hasSelected" @click="handleBatchDelete">批量删除</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="productName" label="商品名称" min-width="150"></el-table-column>
      <el-table-column prop="productionBatch" label="生产批次" width="120">
        <template #default="scope">
          {{ formatDate(scope.row.productionBatch) }}
        </template>
      </el-table-column>
      <el-table-column prop="shelfLife" label="保质期(天)" width="110"></el-table-column>
      <el-table-column prop="productionLicenseNumber" label="生产许可证号" min-width="160"></el-table-column>
      <el-table-column prop="productionCompany" label="生产企业" min-width="180"></el-table-column>
      <el-table-column prop="completenessScore" label="信息完善度" width="120">
        <template #default="scope">
          <div class="completeness-score">
            <span :class="getScoreClass(scope.row.completenessScore)">{{ scope.row.completenessScore }}%</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" min-width="180">
        <template #default="scope">
          {{ formatDateTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280" fixed="right">
        <template #default="scope">
          <el-button size="small" type="info" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="success" @click="handleExport(scope.row)">导出溯源码</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="query.pageIndex"
        :page-sizes="[10, 15, 30, 50, 100]"
        :page-size="query.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog 
      :title="dialogTitle" 
      v-model="dialogVisible" 
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <h3>基本信息</h3>
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
          <el-form-item label="溯源码:" prop="traceabilityCode">
            <el-input v-model="formData.traceabilityCode" placeholder="留空将自动生成溯源码"></el-input>
          </el-form-item>
          <el-form-item label="商品名称:" prop="productName">
            <el-input v-model="formData.productName" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <el-form-item label="生产批次:" prop="productionBatch">
            <el-date-picker
              v-model="formData.productionBatch"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="保质期(天):" prop="shelfLife">
            <el-input-number v-model="formData.shelfLife" :min="1" :max="3650"></el-input-number>
          </el-form-item>
          <el-form-item label="生产许可证号:" prop="productionLicenseNumber">
            <el-input v-model="formData.productionLicenseNumber" placeholder="请输入生产许可证号"></el-input>
          </el-form-item>
          <el-form-item label="生产企业:" prop="productionCompany">
            <el-input v-model="formData.productionCompany" placeholder="请输入生产企业"></el-input>
          </el-form-item>
          <el-form-item label="封面图:">
            <el-upload
              class="avatar-uploader"
              :http-request="uploadRequest"
              :show-file-list="false"
              :on-success="handleImageSuccess"
              :before-upload="beforeImageUpload"
              :on-error="handleImageUploadError"
            >
              <template v-if="formData.coverImage">
                <img 
                  :src="getImageUrl(formData.coverImage)" 
                  class="avatar"
                  @error="handleImageLoadError" 
                  alt="封面图"
                />
              </template>
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div v-if="formData.coverImage" class="image-actions">
              <el-button size="small" type="danger" @click="removeCoverImage">删除图片</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导出设置弹窗 -->
    <el-dialog
      title="导出设置"
      v-model="exportDialogVisible"
      width="500px"
    >
      <el-form :model="exportForm" label-width="100px">
        <el-form-item label="导出数量:">
          <el-input-number v-model="exportForm.quantity" :min="1" :max="1000"></el-input-number>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="exportDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { traceabilityApi } from '@/api/traceability'
import { uploadApi } from '@/api/upload'
import { useRouter } from 'vue-router';

// 数据表格
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const selectedRows = ref([])

// 日期范围选择
const dateRange = ref([])

// 查询参数
const query = reactive({
  pageIndex: 1,
  pageSize: 10,
  productName: '',
  productionBatchStart: null,
  productionBatchEnd: null,
  shelfLifeMin: null,
  shelfLifeMax: null,
  productionLicenseNumber: '',
  productionCompany: ''
})

// 监听日期范围变化
watch(dateRange, (val) => {
  if (val && val.length === 2) {
    query.productionBatchStart = val[0]
    query.productionBatchEnd = val[1]
  } else {
    query.productionBatchStart = null
    query.productionBatchEnd = null
  }
}, { deep: true })

// 表单对话框
const dialogVisible = ref(false)
const dialogTitle = ref('新增溯源信息')
const formRef = ref(null)
const formData = reactive({
  id: null,
  traceabilityCode: '', // 溯源码，可选，为空时后端自动生成
  productName: '',
  productionBatch: '',
  shelfLife: 30,
  productionLicenseNumber: '',
  productionCompany: '',
  coverImage: '',
  completenessScore: 0
})

// 表单验证规则
const rules = {
  traceabilityCode: [
    { max: 50, message: '溯源码长度不能超过50个字符', trigger: 'blur' }
  ],
  productName: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
    { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
  ],
  productionBatch: [
    { required: true, message: '请选择生产批次', trigger: 'change' }
  ],
  shelfLife: [
    { required: true, message: '请输入保质期', trigger: 'blur' },
    { type: 'number', min: 1, max: 3650, message: '保质期必须在1-3650天之间', trigger: 'blur' }
  ],
  productionLicenseNumber: [
    { required: true, message: '请输入生产许可证号', trigger: 'blur' },
    { max: 50, message: '长度不能超过50个字符', trigger: 'blur' }
  ],
  productionCompany: [
    { required: true, message: '请输入生产企业', trigger: 'blur' },
    { max: 100, message: '长度不能超过100个字符', trigger: 'blur' }
  ]
}

// 导出设置
const exportDialogVisible = ref(false)
const exportForm = reactive({
  quantity: 90,
  currentRow: null
})

// 是否有选中行
const hasSelected = computed(() => {
  return selectedRows.value.length > 0
})

// 获取表格数据
const fetchData = async () => {
  loading.value = true
  try {
    console.log('开始获取溯源数据，参数:', query)
    const res = await traceabilityApi.getPagedList(query)
    console.log('获取溯源数据成功，完整响应:', res)
    
    // 不同情况的处理
    if (res && res.code === 'Success' || res.code === 200 || res.code === 0) {
      // 标准分页响应
      if (res.data && res.data.items && Array.isArray(res.data.items)) {
        tableData.value = res.data.items
        total.value = res.data.totalCount || res.data.total || res.data.items.length
      } 
      // 直接返回数组
      else if (res.data && Array.isArray(res.data)) {
        tableData.value = res.data
        total.value = res.data.length
      }
      // 无数据情况
      else {
        tableData.value = []
        total.value = 0
      }
      
      // 调试输出
      console.log('表格数据处理后:', {
        length: tableData.value.length,
        sampleData: tableData.value.length > 0 ? tableData.value[0] : 'No data'
      })
    } else {
      console.error('API返回错误:', res)
      ElMessage.error(res?.message || '获取数据失败')
      tableData.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取溯源管理数据失败，详细错误:', error)
    ElMessage.error('获取溯源管理数据失败: ' + (error.message || '未知错误'))
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toISOString().split('T')[0]
}

// 格式化日期时间（截止到秒）
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '';
  
  try {
    const date = new Date(dateTimeStr);
    if (isNaN(date.getTime())) return dateTimeStr; // 如果无法解析为日期，返回原字符串
    
    // 格式化为 YYYY-MM-DD HH:MM:SS
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  } catch (error) {
    console.error('日期格式化错误:', error);
    return dateTimeStr;
  }
}

// 根据完善度评分获取样式类
const getScoreClass = (score) => {
  if (score >= 80) return 'score-high'
  if (score >= 60) return 'score-medium'
  return 'score-low'
}

// 表格选择事件
const handleSelectionChange = (rows) => {
  selectedRows.value = rows
}

// 分页大小变化
const handleSizeChange = (size) => {
  query.pageSize = size
  query.pageIndex = 1
  fetchData()
}

// 页码变化
const handleCurrentChange = (page) => {
  query.pageIndex = page
  fetchData()
}

// 搜索
const handleSearch = () => {
  query.pageIndex = 1
  fetchData()
}

// 重置搜索
const resetSearch = () => {
  // 重置查询参数
  query.productName = ''
  query.productionLicenseNumber = ''
  query.productionCompany = ''
  query.productionBatchStart = null
  query.productionBatchEnd = null
  query.shelfLifeMin = null
  query.shelfLifeMax = null
  
  // 重置日期范围选择器
  dateRange.value = []
  
  // 重新加载第一页数据
  query.pageIndex = 1
  fetchData()
}

// 打开新增对话框
const handleCreate = () => {
  Object.keys(formData).forEach(key => {
    if (key !== 'shelfLife') {
      formData[key] = ''
    } else {
      formData[key] = 30
    }
  })
  formData.id = null
  formData.completenessScore = 0
  dialogTitle.value = '新增溯源信息'
  dialogVisible.value = true
}

// 打开编辑对话框
const handleEdit = async (row) => {
  console.log('编辑按钮点击，行数据:', row)
  try {
    console.log('准备获取详情，ID:', row.id)
    
    // 清空表单数据，避免旧数据干扰
    Object.keys(formData).forEach(key => {
      if (key !== 'shelfLife') {
        formData[key] = ''
      } else {
        formData[key] = 30
      }
    })
    
    const res = await traceabilityApi.getById(row.id)
    console.log('获取详情结果:', res)
    
    if (res && (res.code === 'Success' || res.code === 200)) {
      // 检查返回的数据结构
      console.log('详情数据结构:', res.data ? Object.keys(res.data) : '无数据')
      
      if (res.data) {
        // 安全地设置表单数据
        formData.id = res.data.id || row.id
        formData.traceabilityCode = res.data.traceabilityCode || ''
        formData.productName = res.data.productName || row.productName || ''
        formData.productionBatch = res.data.productionBatch || row.productionBatch || ''
        formData.shelfLife = res.data.shelfLife || row.shelfLife || 30
        formData.productionLicenseNumber = res.data.productionLicenseNumber || row.productionLicenseNumber || ''
        formData.productionCompany = res.data.productionCompany || row.productionCompany || ''
        formData.coverImage = res.data.coverImage || ''
        formData.completenessScore = res.data.completenessScore || row.completenessScore || 0
      } else {
        // 如果无法获取详情，直接使用行数据
        console.log('使用表格行数据作为回退')
        Object.keys(row).forEach(key => {
          if (key in formData) {
            formData[key] = row[key]
          }
        })
        formData.id = row.id
      }
      
      console.log('设置表单数据完成:', formData)
      dialogTitle.value = '编辑溯源信息'
      dialogVisible.value = true
    } else {
      console.error('获取详情失败，响应码:', res ? res.code : '无响应')
      ElMessage.error(res && res.message ? res.message : '获取数据失败')
      
      // 尝试使用行数据作为备选
      Object.keys(row).forEach(key => {
        if (key in formData) {
          formData[key] = row[key]
        }
      })
      formData.id = row.id
      
      console.log('使用表格行数据:', formData)
      dialogTitle.value = '编辑溯源信息(可能不完整)'
      dialogVisible.value = true
    }
  } catch (error) {
    console.error('获取详细信息失败，详细错误:', error)
    if (error.response) {
      console.error('错误响应:', error.response.status, error.response.data)
    }
    
    ElMessage.warning('获取详情失败，使用行数据进行编辑')
    
    // 尝试使用行数据作为备选
    Object.keys(row).forEach(key => {
      if (key in formData) {
        formData[key] = row[key]
      }
    })
    formData.id = row.id
    
    console.log('使用表格行数据:', formData)
    dialogTitle.value = '编辑溯源信息(可能不完整)'
    dialogVisible.value = true
  }
}

// 处理图片上传成功
const handleImageSuccess = (response, file) => {
  console.log('图片上传响应:', response);
  
  // 使用上传返回的URL
  if (response && (response.code === 'Success' || response.code === 200 || response.code === 0) && response.data) {
    // 获取URL，支持不同的响应格式
    const url = response.data.url || response.data.Url || response.data.fileUrl || response.data.FileUrl;
    
    if (url) {
      formData.coverImage = url;
      console.log('设置封面图URL:', formData.coverImage);
      ElMessage.success('封面图上传成功');
    } else {
      console.error('响应中没有找到URL字段:', response.data);
      ElMessage.warning('获取图片链接失败，请重试');
    }
  } else {
    console.error('图片上传响应异常:', response);
    ElMessage.error(response?.message || '上传失败');
  }
}

// 处理图片加载失败
const handleImageError = (e) => {
  console.error('封面图加载失败:', e.target.src)
  // 设置一个默认图片
  e.target.src = 'https://via.placeholder.com/150?text=图片加载失败'
}

// 处理图片加载失败 (用于上传组件的 on-error)
const handleImageLoadError = (e) => {
  console.error('封面图加载失败:', e.target.src)
  // 设置一个默认图片
  e.target.src = 'https://via.placeholder.com/150?text=图片加载失败'
}

// 删除封面图片
const removeCoverImage = () => {
  formData.coverImage = '';
  ElMessage.success('封面图已删除');
};

// 获取图片URL，处理本地URL和CDN URL
const getImageUrl = (url) => {
  if (!url) return '';
  console.log('原始图片URL:', url);
  
  // 如果是占位符图片URL，可能是测试数据，直接返回
  if (url.includes('placeholder.com')) {
    return 'https://via.placeholder.com/150?text=示例图片';
  }

  // 已经是完整URL
  if (url.startsWith('http://') || url.startsWith('https://')) {
    return url;
  }

  // 相对URL，添加基础路径
  const baseUrl = 'http://localhost:5203';
  const fullUrl = `${baseUrl}${url.startsWith('/') ? '' : '/'}${url}`;
  console.log('处理后的完整URL:', fullUrl);
  return fullUrl;
}

// 自定义上传请求
const uploadRequest = (options) => {
  console.log('准备上传图片:', options.file)
  uploadApi.uploadImage(options.file)
    .then(response => {
      options.onSuccess(response)
    })
    .catch(error => {
      console.error('图片上传失败:', error)
      ElMessage.error('图片上传失败: ' + (error.message || '未知错误'))
      options.onError(error)
    })
}

// 上传前检查
const beforeImageUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2
  
  if (!isImage) {
    ElMessage.error('只能上传图片文件')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB')
    return false
  }
  return true
}

// 处理图片上传错误
const handleImageUploadError = (error) => {
  console.error('图片上传失败:', error);
  ElMessage.error('图片上传失败: ' + (error.message || '未知错误'));
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) {
    console.error('表单引用不存在')
    ElMessage.error('表单验证失败')
    return
  }
  
  try {
    // 表单验证
    await formRef.value.validate()
    console.log('表单验证通过，准备提交数据:', formData)
    
    // 确保必填字段不为空
    if (!formData.productName || !formData.productionBatch || !formData.productionLicenseNumber || !formData.productionCompany) {
      console.error('必填字段为空')
      ElMessage.error('请填写所有必填字段')
      return
    }
    
    let res
    if (formData.id) {
      // 更新
      console.log('更新记录，ID:', formData.id)
      res = await traceabilityApi.update(formData.id, formData)
      console.log('更新结果:', res)
    } else {
      // 创建
      console.log('创建新记录')
      res = await traceabilityApi.create(formData)
      console.log('创建结果:', res)
    }
    
    if (res && (res.code === 'Success' || res.code === 200)) {
      ElMessage.success(formData.id ? '更新成功' : '创建成功')
      dialogVisible.value = false
      fetchData() // 刷新表格数据
    } else {
      console.error('操作失败:', res)
      ElMessage.error(res && res.message ? res.message : (formData.id ? '更新失败' : '创建失败'))
    }
  } catch (error) {
    console.error('提交表单失败，详细错误:', error)
    if (error.errors) {
      console.error('表单验证错误:', error.errors)
    }
    if (error.response) {
      console.error('HTTP错误:', error.response.status, error.response.data)
    }
    ElMessage.error(formData.id ? '更新失败: ' + (error.message || '未知错误') : '创建失败: ' + (error.message || '未知错误'))
  }
}

// 删除记录
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该条溯源记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      console.log('准备删除记录, ID:', row.id)
      const res = await traceabilityApi.delete(row.id)
      console.log('删除API响应:', res)
      
      if (res.code === 'Success' || res.code === 200) {
        ElMessage.success('删除成功')
      } else {
        console.error('删除返回错误:', res)
        ElMessage.error(res.message || '删除失败')
      }
    } catch (error) {
      console.error('删除操作异常:', error)
      ElMessage.error('删除操作发生异常: ' + (error.message || '未知错误'))
    } finally {
      // 无论成功还是失败，都刷新表格数据
      fetchData()
    }
  }).catch(() => {
    // 用户取消删除操作
  })
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }
  
  const ids = selectedRows.value.map(item => item.id)
  
  ElMessageBox.confirm(`确定要删除这${ids.length}条记录吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      console.log('准备批量删除记录, IDs:', ids)
      const res = await traceabilityApi.batchDelete(ids)
      console.log('批量删除API响应:', res)
      
      if (res.code === 'Success' || res.code === 200) {
        ElMessage.success('批量删除成功')
      } else {
        console.error('批量删除返回错误:', res)
        ElMessage.error(res.message || '批量删除失败')
      }
    } catch (error) {
      console.error('批量删除操作异常:', error)
      ElMessage.error('批量删除操作发生异常: ' + (error.message || '未知错误'))
    } finally {
      // 无论成功还是失败，都刷新表格数据
      fetchData()
    }
  }).catch(() => {
    // 用户取消删除操作
  })
}

// 导出溯源码
const handleExport = (row) => {
  exportForm.currentRow = row
  exportDialogVisible.value = true
}

// 确认导出
const confirmExport = () => {
  if (!exportForm.currentRow) {
    ElMessage.warning('未选择要导出的记录')
    return
  }
  
  ElMessage.success(`成功导出${exportForm.quantity}个溯源码`)
  exportDialogVisible.value = false
}

// 查看详情
const router = useRouter();
const handleDetail = (row) => {
  console.log('查看详情，行数据:', row);
  
  // 确保ID存在
  if (!row.id) {
    console.error('行数据缺少ID:', row);
    ElMessage.warning('无法查看详情：记录ID缺失');
    return;
  }
  
  // 将ID转换为数字确保类型一致
  const id = Number(row.id);
  console.log('跳转到详情页，ID:', id);
  
  try {
    // 使用带前导/的绝对路径，但不重复添加父路由路径
    router.push(`/enterprise/traceability-detail/${id}`);
  } catch (error) {
    // 捕获导航错误
    console.error('路由跳转错误:', error);
    ElMessage.error('导航到详情页失败');
  }
}

// 页面加载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.traceability-container {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.page-header .title {
  font-size: 18px;
  font-weight: bold;
  margin-right: 15px;
}

.action-bar {
  margin-bottom: 20px;
}

.completeness-score {
  font-weight: bold;
}

.score-high {
  color: #67C23A;
}

.score-medium {
  color: #E6A23C;
}

.score-low {
  color: #F56C6C;
}

.dialog-content h3 {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EBEEF5;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 上传组件样式 */
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

.image-actions {
  margin-top: 10px;
  text-align: center;
}
</style> 